<dom-module id="ve-image-preview">
  <style>
    :host {
      position: relative;
      height: 300px;
      overflow: hidden;
    }

    .view {
      box-shadow: inset 0 0 15px 5px rgba(0,0,0,0.5);
      background: #292929;
    }

    #content {
      position: absolute;
      top: 15px;
      right: 15px;
      bottom: 15px;
      left: 15px;
    }

    canvas {
      margin: auto;
      position: absolute;
      left: 0; bottom: 0; right: 0;

      display: block;
      background-image: url('app://res/grid1.png');
      background-size: 32px 32px;
      background-position: center center;
    }

    ve-label {
      position: absolute;
      width: 100%;
      bottom: 10px;
      pointer-events: none;
      text-align: center;
    }
  </style>
  <template>
    <div class="view fit">
      <div id="content">
        <canvas id="canvas" width="1" height="1"></canvas>
      </div>
      <ve-label class="mini blue">{{info}}</ve-label>
    </div>
  </template>
  <script src="ve-image-preview.js"></script>
</dom-module>